<template>
    <div>
        <img :src="merchImg" alt="">
        <div class="pp"> 
            <p class="p1">{{collectionMerch}}</p>
            <p class="p2">{{merchPrice}}</p>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            collectionMerch: String,
            merchPrice: String,
            merchImg:String,
        }
    }
</script>

<style lang="scss" scoped>
div{
    display: flex;
    margin-bottom: 1vw;
    img{
        width: 30vw;
        padding-left: 3vw;
    }
    .pp{
        flex-wrap: wrap;
        text-align: left;
        padding-right: 3vw;
        position: relative;
        width: 62vw;
        .p1{
            position: absolute;
            font-weight: bold;
            top: 3vw;
            left: 2vw;
            font-size: 5vw;
        }
        .p2{
            position: absolute;
            top: 20vw;
            right: 4vw;
            font-size: 4vw;
            color: red;
        }
    }
}
</style>